<template>
	<div class='container'>
		<h3>实况图片预览</h3>
		<p>此处图片用服务器上的地址</p>
		<p>
			<mark>在文件夹中手动打开html文件查看效果</mark>
			文件地址：<span style="color:red">viwe/LivePhoto/viewLivePhoto/index.html</span>
		</p>
		<div data-live-photo data-photo-src="./viewLivePhoto/img/IMG_6710.JPG"
			data-video-src="./viewLivePhoto/img/IMG_6710.MOV" style="width: 320px; height: 320px"></div>
		<!-- data-photo-src 为常规图片地址 -->
		<!-- data-video-src 为音频地址 -->
	</div>
</template>

<script setup>
import { onMounted } from 'vue';
import * as LivePhotosKit from 'livephotoskit';

onMounted(() => {
	const player = LivePhotosKit.augmentElementAsPlayer(
			document.querySelector("[data-live-photo]")
		);
		player.addEventListener('canplay', evt => console.log('player ready', evt));
		player.addEventListener('error', evt => console.log('player load error', evt));
		player.addEventListener('ended', evt => console.log('player finished playing through', evt));
		player.play();
})
</script>
<style lang='less' scoped>
.container {}
</style>
